/*
 * @Author: your name
 * @Date: 2022-04-07 15:03:59
 * @LastEditTime: 2022-04-07 19:48:22
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \erp-management-system\src\views\finance\table\addState\addInClassfiy.jsx
 */
import React, { useState } from 'react';
import { Modal, Button, Form, Input } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import './addInClassfiy.css'
import Deleteoption from './deleteOption'

export default function AddInClassfiy(props) {
    // console.log(props);
    const { incomeTypeList,getAddValue } = props
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [form] = Form.useForm();

    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        // setIsModalVisible(false);
        // console.log(form.resetFields());
        const newVale = form.getFieldsValue().addValue
        getAddValue(newVale)
        form.resetFields()

    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    //表单
    const onFinish = (values) => {
        console.log('Success:', values);
    };


    return (
        <>
            <Button type="primary" onClick={showModal} className='btn-addInClassfiy' icon={<PlusOutlined />}>
                新增
            </Button>
            <Modal title="自定义选项值" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} mask={false}>
                <Form
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    form={form}
                    name="control-hooks"
                    onFinish={onFinish}
                >
                    <Form.Item
                        name="addValue"
                        label="新增选项值"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="haveValue"
                        label="已有选项值"
                    >
                        <>
                            {
                                incomeTypeList.map(item => {
                                    return <div key={item.id} className='div-hadvalue'>
                                        {item.name}
                                    </div >
                                })
                            }
                        </>
                    </Form.Item>

                    <Form.Item
                        name="deleteValue"
                        label=""
                    >
                        <Deleteoption incomeTypeList={incomeTypeList}/>
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
}
